<template>
    <Transition>
        <div v-if="showFeedback">
            <div class="dialog">
                <div class="title">评价与反馈！</div>
                <div class="subhead">请为本次服务满意度评分</div>
                <div class="option">
                    <fieldset class="row">
                        <template v-for="v in 5" :key="v">
                            <input type="radio" :id="'rate_'+v" name="starLevel" :value="v" @click="satisfying"/>
                            <label :for="'rate_'+v"></label>
                        </template>
                    </fieldset>
                    <textarea v-model.trim="state.comment" class="textarea" placeholder="请输入内容，仅限 50 字以内" maxlength='50'></textarea>
                </div>
                <button class="btn" @click="submit">提交</button>
                <span class="iconfont close icon-guanbi" @click="close"></span>
            </div>
            <div class="mask" ></div>
        </div>
    </Transition>
</template>

<script setup>
import { reactive,ref} from 'vue'
import {getFeedbackSession} from '@/utils/api.js'
import {ElMessage} from "element-plus";
const emit = defineEmits(['closeFeedback'])
const props = defineProps({
    showFeedback: Boolean,
    sessionId:{
        type:null,
        required:true,
        default:null
    }
})
const isTextarea =ref()
const state = reactive({
    sessionId:null,
    feedback:0,
    comment:'',
})
// const
function satisfying(e){
    state.feedback = Math.abs(e.target.value - 5)+1
}

function submit(){
    if(! /^([1-5]|5)$/.test(`${state.feedback}`)) return ElMessage({  message: '请为本次服务满意度评分',  type: 'warning',  grouping: true })
    if(state.comment === '') delete state.comment
    state.sessionId = props.sessionId
    getFeedbackSession(state).then(v =>{
        if(v.c === '100'){
            ElMessage({
                message: '感谢你为本次服务满意度评分',
                type: 'success',
                customClass:"MyMsg",
                grouping: true
            })
            close()
        }
    })

}

// 关闭  Gpt内容反馈
function close(){
    state.comment = ''
    state.feedback = ''
    emit('closeFeedback',false)
}



</script>

<style scoped lang="scss">

.mask {
    position: fixed;
    z-index: 2;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 560px;
    height: 670px;
    border-radius: 30px;
    background: linear-gradient(222deg, #DEFFF1 1%, #FFFFFF 47%, #E7F1FF 100%);
    padding: 60px 40px 40px;
    z-index: 3;
    box-sizing: border-box;
    text-align: center;
    font-family: Regular,sans-serif;
    color: #3D3D3D;
    .title{
        height: 40px;
        line-height:40px;
        font-size: 28px;
        font-weight: 700;
    }
    .subhead{
        margin-top: 40px;
        font-size: 26px;
    }
    .option{
        display: flex;
        flex-direction: column;
        gap: 24px 0;
        margin-top: 30px;
        .row{
            display:flex;
            flex-direction: row-reverse;
            gap: 0 20px;
            justify-content: center;
            position:relative;
            width:inherit;
            min-height:35px;
            padding:0;
            border:none;
            &>input{
                position:absolute;
                margin-right:-100%;
                opacity:0;
                &:checked~label,&:hover~label {
                    background-position:0 -60px;
                    //transition:background-position .7s
                }
            }
            &>label {
                position:relative;
                display:inline-block;
                float:right;
                width:60px;
                height:60px;
                color:transparent;
                cursor:pointer;
                background-size: 60px 120px;
                background-image:url(@/assets/image/icons.png);
                background-repeat:no-repeat;
            }
        }
        .textarea{
            margin-top: 30px;
            width: 480px;
            height: 150px;
            border-radius: 10px;
            border: 1px solid #E5E5E5;
            padding:  13px 18px;
            box-sizing: border-box;
            font-size: 26px;
            font-family: Regular,sans-serif;
            outline: none;
            resize: none;
        }
    }
    .btn{
        margin: 30px auto 0;
        width: 400px;
        height: 88px;
        border-radius: 50px;
        background: #197CFD;
        font-family: Regular,sans-serif;
        font-size: 28px;
        color: #fff;
    }
    .close{
        position: absolute;
        bottom: -120px;
        left: 50%;
        transform: translate(-50%,0);
        color: #CBCBCB;
        font-size: 36px;
    }
}
</style>